程序员练级攻略：UI-UX设计-[2026重制版]

/* ✅ 通过AA标准 */
.text-primary { color: #1e40af; } /* 对比度 8.59:1 */
.bg-white { background-color: #ffffff; }

/* ❌ 未通过 */
.text-light { color: #93c5fd; } /* 对比度 2.07:1 - 不合格! */

// 基于 Tailwind CSS + Radix UI 的原子组件

// === Atom: Button ===
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
    size?: 'default' | 'sm' | 'lg' | 'icon';
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
    ({ className, variant = 'default', size = 'default', ...props }, ref) => {
        return (
            <button
                ref={ref}
                className={cn(
                    // 基础样式
                    'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium',
                    // 变体样式
                    variantStyles[variant],
                    // 尺寸样式
                    sizeStyles[size],
                    // 焦点样式（无障碍！）
                    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
                    // 禁用状态
                    'disabled:pointer-events-none disabled:opacity-50',
                    className
                )}
                {...props}
            />
        );
    }
);

// === Molecule: Search Input ===
function SearchInput({ onSearch, placeholder = '搜索...' }) {
    const [value, setValue] = useState('');
    
    return (
        <div className="flex items-center gap-2 rounded-lg border px-3 py-2">
            <SearchIcon className="h-4 w-4 text-muted-foreground" />
            <Input
                value={value}
                onChange={(e) => setValue(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && onSearch(value)}
                placeholder={placeholder}
                className="border-0 focus-visible:ring-0"
            />
            {value && (
                <Button variant="ghost" size="icon" onClick={() => setValue('')}>
                    <XIcon className="h-4 w-4" />
                </Button>
            )}
        </div>
    );
}

// === Organism: UserCard ===
function UserCard({ user }: { user: User }) {
    return (
        <Card>
            <CardHeader className="flex-row items-center gap-4">
                <Avatar src={user.avatar} alt={user.name} />
                <div className="flex-1">
                    <CardTitle>{user.name}</CardTitle>
                    <CardDescription>@{user.handle}</CardDescription>
                </div>
                <Button variant="outline" size="sm">关注</Button>
            </CardHeader>
            <CardContent>
                <p className="text-sm text-muted-foreground">{user.bio}</p>
            </CardContent>
        </Card>
    );
}

// ✅ 无障碍的模态框组件
import { useEffect, useRef, useCallback } from 'react';

function Modal({ isOpen, onClose, title, children }) {
    const modalRef = useRef<HTMLDivElement>(null);
    const previousFocusRef = useRef<HTMLElement>(null);

    // 打开时保存焦点，关闭时恢复
    useEffect(() => {
        if (isOpen) {
            previousFocusRef.current = document.activeElement as HTMLElement;
            modalRef.current?.focus();
            
            // 捕获焦点（焦点陷阱）
            document.addEventListener('keydown', handleKeyDown);
            document.body.style.overflow = 'hidden';
        }
        
        return () => {
            document.removeEventListener('keydown', handleKeyDown);
            document.body.style.overflow = '';
            previousFocusRef.current?.focus();
        };
    }, [isOpen]);

    // ESC关闭 + 焦点陷阱
    const handleKeyDown = useCallback((e: KeyboardEvent) => {
        if (e.key === 'Escape') onClose();
        
        // Tab焦点循环
        if (e.key === 'Tab' && modalRef.current) {
            trapFocus(e, modalRef.current);
        }
    }, [onClose]);

    if (!isOpen) return null;

    return (
        {/* 背景遮罩 */}
        <div 
            role="presentation"
            onClick={onClose}
            className="fixed inset-0 bg-black/50 z-40"
        >
            {/* 模态框内容 */}
            <div
                ref={modalRef}
                role="dialog"
                aria-modal="true"
                aria-labelledby="modal-title"
                aria-describedby="modal-description"
                className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-xl z-50"
                onClick={(e) => e.stopPropagation()}  // 防止冒泡关闭
            >
                <h2 id="modal-title">{title}</h2>
                <div id="modal-description">{children}</div>
                
                <button
                    onClick={onClose}
                    aria-label="关闭对话框"
                    className="absolute right-4 top-4 p-2 hover:bg-gray-100 rounded"
                >
                    ✕
                </button>
            </div>
        </div>
    );
}

// lib/theme.ts - 暗黑模式管理
type Theme = 'light' | 'dark' | 'system';

// CSS变量定义（Tailwind方式）
const themeConfig = {
    light: {
        '--background': '0 0% 100%',
        '--foreground': '222.2 84% 4.9%',
        '--card': '0 0% 100%',
        '--primary': '222.2 47.4% 11.2%',
        '--muted': '210 40% 96.1%',
    },
    dark: {
        '--background': '222.2 84% 4.9%',
        '--foreground': '210 40% 98%',
        '--card': '222.2 84% 4.9%',
        '--primary': '210 40% 98%',
        '--muted': '217.2 32.6% 17.5%',
    }
};

// 切换函数
function setTheme(theme: Theme) {
    const root = window.document.documentElement;
    
    if (theme === 'system') {
        const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
            ? 'dark'
            : 'light';
        root.classList.remove('light', 'dark');
        root.classList.add(systemTheme);
    } else {
        root.classList.remove('light', 'dark');
        root.classList.add(theme);
    }

    localStorage.setItem('theme', theme);
}